<!DOCTYPE html >
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
</head>
<body style="margin: 0;overflow: hidden;display: flex;align-items: center;height: 100vh;justify-content: center">
<div class="container main-container uGuiBorder">
    <div class="container text-center" style="height: 100%">
        <div class="row" style="height: 100%;box-sizing: border-box;padding:20px">
            <div id="uGuiMainList" class="col-2 uGuiBorder"
                 style="height: 100%;box-sizing: border-box;padding-top: 20px;padding-bottom: 20px;display: flex;flex-direction: column;">

            </div>
            <div class="col-1"></div>
            <div id="mainContainer" class="col-9 uGuiBorder" style="height: 100%;margin: 0;padding: 0">
            </div>
        </div>
    </div>
</div>
<!--背德模板-->
<div class="textWrapper" style="position: absolute;top:20px;left: 20px; ">
    <p class="text">UGUI</p>
    <div class="invertBox"></div>
</div>
<a href="/old/首页.html" style="position: absolute;right: 30px;bottom: 30px">旧页面</a>
<div id="hideInInit" style="display: none">
    <div id="uGuiIconList">
        <!--图标库-->
        <svg style="width: 100%;height: auto" t="1729496139817" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="1421" width="200" height="200">
            <path d="M194.56 97.28h322.8672A96.7168 96.7168 0 0 1 614.4 193.9968v235.008a68.3008 68.3008 0 0 1-68.3008 68.3008H194.56a96.7168 96.7168 0 0 1-96.512-96.768V193.9968A96.7168 96.7168 0 0 1 194.56 97.28z"
                  fill="#402AD2" p-id="1422"></path>
            <path d="M176.4864 126.6688h329.4208a78.4384 78.4384 0 0 1 78.4384 78.4384v242.176a50.0224 50.0224 0 0 1-50.0224 50.0224H176.4864a78.4384 78.4384 0 0 1-78.4384-78.4384V205.1072a78.4384 78.4384 0 0 1 78.4384-78.4384z"
                  fill="#534FFF" p-id="1423"></path>
            <path d="M847.0528 497.3056H715.264a64.3584 64.3584 0 0 1-64.3584-64.3584V190.1056A92.8256 92.8256 0 0 1 743.7312 97.28h103.3216a92.8256 92.8256 0 0 1 92.8256 92.8256V404.48a92.8256 92.8256 0 0 1-92.8256 92.8256z"
                  fill="#7518ED" p-id="1424"></path>
            <path d="M833.3312 497.3056h-132.352a50.0224 50.0224 0 0 1-50.0224-50.0224v-242.176a78.4384 78.4384 0 0 1 78.4384-78.4384h103.936a78.4384 78.4384 0 0 1 78.4384 78.4384v213.76a78.4384 78.4384 0 0 1-78.4384 78.4384z"
                  fill="#9539FC" p-id="1425"></path>
            <path d="M850.0224 931.9424h-334.5408a89.856 89.856 0 0 1-89.856-89.856V595.456a61.44 61.44 0 0 1 61.44-61.44h362.9568a89.856 89.856 0 0 1 89.856 89.856v218.2144a89.856 89.856 0 0 1-89.856 89.856z"
                  fill="#402AD2" p-id="1426"></path>
            <path d="M833.3312 931.9424H503.9104a78.4384 78.4384 0 0 1-78.4384-78.6432v-242.176a50.0224 50.0224 0 0 1 50.0224-50.0224h357.8368a78.4384 78.4384 0 0 1 78.4384 78.6944v213.504a78.4384 78.4384 0 0 1-78.4384 78.4384z"
                  fill="#534FFF" p-id="1427"></path>
            <path d="M176.4864 533.9136h157.184a50.0224 50.0224 0 0 1 50.0224 49.7664v269.824A78.4384 78.4384 0 0 1 305.2544 931.84H176.4864a78.4384 78.4384 0 0 1-78.4384-78.336v-241.152a78.4384 78.4384 0 0 1 78.4384-78.4384z"
                  fill="#E51F4E" p-id="1428"></path>
            <path d="M176.4864 561.3568h132.352a50.0224 50.0224 0 0 1 50.0224 50.0224v242.176A78.4384 78.4384 0 0 1 280.4224 931.84h-103.936a78.4384 78.4384 0 0 1-78.4384-78.336V640a78.4384 78.4384 0 0 1 78.4384-78.4384z"
                  fill="#F5536C" p-id="1429"></path>
        </svg>
        <svg style="width: 100%;height: auto" t="1729496257444" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="2215" width="200" height="200">
            <path d="M736.768 309.0432h-84.0192V180.3776H361.5232v128.6656h-83.968V172.4416c0-38.912 33.8432-70.6048 75.4688-70.6048h293.12c63.8976 0 90.624 51.8656 90.624 90.7776z"
                  fill="#0F059B" p-id="2216"></path>
            <path d="M706.9184 339.3024h-78.5408V210.6368H356.0448v128.6656H277.5552V202.7008A70.656 70.656 0 0 1 348.16 132.096h288.2048a70.656 70.656 0 0 1 70.6048 70.6048z"
                  fill="#402AD2" p-id="2217"></path>
            <path d="M67.4304 263.8848m133.9904 0l622.0288 0q133.9904 0 133.9904 133.9904l0 390.0928q0 133.9904-133.9904 133.9904l-622.0288 0q-133.9904 0-133.9904-133.9904l0-390.0928q0-133.9904 133.9904-133.9904Z"
                  fill="#402AD2" p-id="2218"></path>
            <path d="M67.4304 300.4416m109.824 0l628.6848 0q109.824 0 109.824 109.824l0 401.8688q0 109.824-109.824 109.824l-628.6848 0q-109.824 0-109.824-109.824l0-401.8688q0-109.824 109.824-109.824Z"
                  fill="#534FFF" p-id="2219"></path>
            <path d="M915.7632 465.5104h-286.72C609.28 409.1392 555.4688 378.88 492.3904 378.88s-116.736 30.1568-136.5504 86.528H67.4304v95.9488h848.3328z"
                  fill="#FF9100" p-id="2220"></path>
            <path d="M915.7632 613.0176h-286.72c-19.7632 56.32-73.4208 86.6304-136.4992 86.6304s-116.736-30.3104-136.5504-86.6304H67.4304V517.12h848.3328z"
                  fill="#3A3AED" p-id="2221"></path>
            <path d="M915.7632 500.5312H604.16a118.4256 118.4256 0 0 0-223.4368 0H67.4304v78.4896h313.088a118.4256 118.4256 0 0 0 223.4368 0h311.808z"
                  fill="#F6E937" p-id="2222"></path>
        </svg>
        <svg style="width: 100%;height: auto" t="1729496166769" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="1579" width="200" height="200">
            <path d="M267.7248 112.1792m134.9632 0l426.2912 0q134.9632 0 134.9632 134.9632l0 208.896q0 134.9632-134.9632 134.9632l-426.2912 0q-134.9632 0-134.9632-134.9632l0-208.896q0-134.9632 134.9632-134.9632Z"
                  fill="#0F059B" p-id="1580"></path>
            <path d="M267.7248 142.9504m118.1184 0l428.288 0q118.1184 0 118.1184 118.1184l0 211.8144q0 118.1184-118.1184 118.1184l-428.288 0q-118.1184 0-118.1184-118.1184l0-211.8144q0-118.1184 118.1184-118.1184Z"
                  fill="#402AD2" p-id="1581"></path>
            <path d="M734.8224 781.056H517.12l-183.4496 134.144c-27.648 20.224-68.0448 1.9968-68.4544-30.72l-1.2288-103.2192h-48.4864c-80.6912 0-146.1248-61.44-146.1248-137.1136v-276.48C69.376 291.84 134.8096 230.4 215.5008 230.4h519.3216c80.6912 0 146.1248 61.44 146.1248 137.1136v276.48c0 75.6736-65.4336 137.0624-146.1248 137.0624z"
                  fill="#0F059B" p-id="1582"></path>
            <path d="M706.9184 787.6608H498.2272L322.56 915.6096c-26.5216 19.3024-65.1776 1.8944-65.5872-29.4912l-1.1776-98.4576h-46.08c-77.312 0-140.032-58.5728-140.032-130.816V393.3184c0-72.2432 62.72-130.7648 140.032-130.7648h497.5104c77.3632 0 140.032 58.5216 140.032 130.7648v263.5264c-0.3072 72.2432-62.976 130.816-140.3392 130.816z"
                  fill="#534FFF" p-id="1583"></path>
            <path d="M650.24 532.992H256.768a39.3216 39.3216 0 0 1 0-78.5408H650.24a39.3216 39.3216 0 0 1 0 78.5408zM428.032 693.4016H256.768a39.3216 39.3216 0 0 1 0-78.592H428.032a39.3216 39.3216 0 0 1 0 78.592z"
                  fill="#2B20C6" p-id="1584"></path>
            <path d="M650.24 497.2032H256.768a37.5808 37.5808 0 1 1 0-75.1104H650.24a37.5808 37.5808 0 1 1 0 75.1104zM428.032 650.5472H256.768a37.5808 37.5808 0 1 1 0-75.1104H428.032a37.5808 37.5808 0 1 1 0 75.1104z"
                  fill="#F6E937" p-id="1585"></path>
        </svg>
        <svg style="width: 100%;height: auto" t="1729496205510" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="1893" width="200" height="200">
            <path d="M377.8048 451.9936a148.48 148.48 0 1 0-133.5808 0 270.0288 270.0288 0 0 0-199.2192 261.12 62.8736 62.8736 0 0 0 62.8736 62.8736h406.1184a62.8736 62.8736 0 0 0 62.9248-62.8736v-3.9936a266.24 266.24 0 0 0-199.1168-257.1264z"
                  fill="#0F059B" p-id="1894"></path>
            <path d="M359.8336 469.504a140.4928 140.4928 0 1 0-126.3616 0A255.488 255.488 0 0 0 45.0048 716.8a59.4944 59.4944 0 0 0 59.4944 59.4944h384A59.4944 59.4944 0 0 0 548.1472 716.8v-3.7376A251.648 251.648 0 0 0 359.8336 469.504z"
                  fill="#402AD2" p-id="1895"></path>
            <path d="M776.8576 451.9936a148.48 148.48 0 1 0-133.5808 0 270.08 270.08 0 0 0-199.2704 261.12A62.8736 62.8736 0 0 0 506.88 776.2432h406.1184a62.8736 62.8736 0 0 0 62.8736-62.8736v-3.9936a266.24 266.24 0 0 0-199.0144-257.3824z"
                  fill="#0F059B" p-id="1896"></path>
            <path d="M758.8864 469.504a140.544 140.544 0 1 0-126.3616 0A255.488 255.488 0 0 0 444.0064 716.8a59.4944 59.4944 0 0 0 59.4944 59.4944h384A59.5456 59.5456 0 0 0 947.2 716.8v-3.7376a251.648 251.648 0 0 0-188.3136-243.5584z"
                  fill="#402AD2" p-id="1897"></path>
            <path d="M602.7776 478.976a185.6512 185.6512 0 1 0-167.0144 0C291.84 517.12 186.6752 650.24 186.6752 805.7344a78.6432 78.6432 0 0 0 78.6432 78.6432H773.12a78.6432 78.6432 0 0 0 78.592-78.6432v-5.12a332.8 332.8 0 0 0-248.9344-321.6384z"
                  fill="#0F059B" p-id="1898"></path>
            <path d="M585.4208 496.64a177.6128 177.6128 0 1 0-159.744 0c-137.6256 36.1984-238.2336 163.84-238.2336 312.32a75.2128 75.2128 0 0 0 75.2128 75.4176h485.5808A75.2128 75.2128 0 0 0 823.4496 808.96v-4.7616A318.0544 318.0544 0 0 0 585.4208 496.64z"
                  fill="#534FFF" p-id="1899"></path>
            <path d="M624.64 821.9648H386.5088c-19.8144 0-35.84-22.8864-35.84-51.2s16.0256-51.2 35.84-51.2H624.64c19.8144 0 35.84 22.8864 35.84 51.2s-16.2816 51.2-35.84 51.2z"
                  fill="#2B20C6" p-id="1900"></path>
            <path d="M624.64 785.5616H386.5088a35.84 35.84 0 0 1 0-71.68H624.64a35.84 35.84 0 0 1 0 71.68z"
                  fill="#F6E937"
                  p-id="1901"></path>
        </svg>
        <svg style="width: 100%;height: auto" t="1729496222330" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="2051" width="200" height="200">
            <path d="M667.0336 304.5376h220.16a57.3952 57.3952 0 0 1 57.3952 57.3952v447.5904a117.76 117.76 0 0 1-117.76 117.76h-159.744V304.5376h-0.0512z"
                  fill="#0F059B" p-id="2052"></path>
            <path d="M667.0336 348.9792h212.0704a21.5552 21.5552 0 0 1 21.5552 21.5552v438.9888a117.76 117.76 0 0 1-117.76 117.76h-115.8656V348.9792z"
                  fill="#402AD2" p-id="2053"></path>
            <path d="M225.28 91.392h431.8208A136.2944 136.2944 0 0 1 793.6 227.6864v699.4944H201.472a112.64 112.64 0 0 1-112.64-112.64V227.6864A136.2944 136.2944 0 0 1 225.28 91.392z"
                  fill="#0F059B" p-id="2054"></path>
            <path d="M201.472 135.1168h431.0016a112.64 112.64 0 0 1 112.64 112.64v679.424H201.472a112.64 112.64 0 0 1-112.64-112.64V247.552a112.64 112.64 0 0 1 112.64-112.64z"
                  fill="#534FFF" p-id="2055"></path>
            <path d="M181.4528 232.192m58.1632 0l131.84 0q58.1632 0 58.1632 58.1632l0 260.7616q0 58.1632-58.1632 58.1632l-131.84 0q-58.1632 0-58.1632-58.1632l0-260.7616q0-58.1632 58.1632-58.1632Z"
                  fill="#FCB423" p-id="2056"></path>
            <path d="M181.4528 258.0992m47.7184 0l124.7232 0q47.7184 0 47.7184 47.7184l0 255.6928q0 47.7184-47.7184 47.7184l-124.7232 0q-47.7184 0-47.7184-47.7184l0-255.6928q0-47.7184 47.7184-47.7184Z"
                  fill="#FFD62C" p-id="2057"></path>
            <path d="M636.9792 792.4736h-424.96c-20.48 0-37.4784-21.4016-37.4784-47.7696s16.9984-47.7696 42.8544-47.7696h419.584c20.48 0 37.4272 21.3504 37.4272 47.7696s-16.7424 47.7696-37.4272 47.7696z"
                  fill="#FCB423" p-id="2058"></path>
            <path d="M621.8752 792.4736H210.7904a37.4784 37.4784 0 0 1 0-74.9568h411.0848a37.4784 37.4784 0 0 1 0 74.9568z"
                  fill="#FFD62C" p-id="2059"></path>
            <path d="M640.3584 556.544h-119.7568c-21.1456 0-38.2464-21.248-38.2464-47.4624s17.1008-47.4112 38.2464-47.4112h119.7568c21.1456 0 38.2976 21.248 38.2976 47.4112s-17.152 47.4624-38.2976 47.4624z"
                  fill="#FCB423" p-id="2060"></path>
            <path d="M627.1488 556.544h-109.7216a37.5808 37.5808 0 0 1 0-74.9568h109.7216a37.5808 37.5808 0 0 1 0 74.9568z"
                  fill="#FFD62C" p-id="2061"></path>
            <path d="M640.3584 353.9456h-119.7568c-21.1456 0-38.2464-21.1968-38.2464-47.4112s17.1008-47.4112 38.2464-47.4112h119.7568c21.1456 0 38.2976 21.248 38.2976 47.4112s-17.152 47.4112-38.2976 47.4112z"
                  fill="#FCB423" p-id="2062"></path>
            <path d="M627.1488 353.9456h-109.7216a37.5296 37.5296 0 0 1 0-74.9056h109.7216a37.5296 37.5296 0 0 1 0 74.9056z"
                  fill="#FFD62C" p-id="2063"></path>
        </svg>
        <svg style="width: 100%;height: auto" t="1729496188316" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="1737" width="200" height="200">
            <path d="M964.864 410.2144a27.2896 27.2896 0 0 0-27.2384-20.7872 131.2768 131.2768 0 0 1-114.0224-63.2832 125.4912 125.4912 0 0 1-1.4336-126.9248 26.368 26.368 0 0 0-5.5296-33.3312 461.6704 461.6704 0 0 0-157.5424-87.7568 27.5968 27.5968 0 0 0-31.9488 12.0832 132.2496 132.2496 0 0 1-224.9216 0 27.648 27.648 0 0 0-32-12.0832A461.9264 461.9264 0 0 0 212.736 165.888a26.368 26.368 0 0 0-5.5296 33.3312 125.4912 125.4912 0 0 1-1.4336 126.9248 131.2768 131.2768 0 0 1-114.0224 63.2832 27.2896 27.2896 0 0 0-27.2384 20.7872 441.7536 441.7536 0 0 0-10.6496 96.2048 378.112 378.112 0 0 0 9.1136 89.6c6.1952 25.2928 36.7616 31.8976 49.9712 31.6928 45.7216-0.768 68.096 11.3664 92.8256 52.6848a125.5936 125.5936 0 0 1-0.6144 130.4576A26.3168 26.3168 0 0 0 209.92 844.8a462.592 462.592 0 0 0 156.9792 88.9344 27.648 27.648 0 0 0 32.6656-13.0048 132.1472 132.1472 0 0 1 229.9392 0 27.648 27.648 0 0 0 32.6656 13.0048A462.592 462.592 0 0 0 819.2 844.8a26.3168 26.3168 0 0 0 5.12-33.8944 125.5936 125.5936 0 0 1-0.6144-130.4576c24.7296-41.3184 41.2672-52.6336 87.04-51.9168 13.2096 0 52.0192-15.36 55.808-32.4608a420.5568 420.5568 0 0 0 9.0624-89.6 441.7536 441.7536 0 0 0-10.752-96.256z"
                  fill="#0F059B" p-id="1738"></path>
            <path d="M931.5328 432.5376a25.6 25.6 0 0 0-25.2928-19.7632 121.2416 121.2416 0 0 1-107.1104-180.2752 25.6 25.6 0 0 0-5.12-31.5904A426.0864 426.0864 0 0 0 647.8848 117.76a25.6 25.6 0 0 0-29.696 11.4688 121.2416 121.2416 0 0 1-208.5888 0A25.6 25.6 0 0 0 379.904 117.76a426.0864 426.0864 0 0 0-146.1248 83.1488 25.6 25.6 0 0 0-5.12 31.5904 121.2416 121.2416 0 0 1-107.1616 180.2752 25.6 25.6 0 0 0-25.2416 19.7632 424.1408 424.1408 0 0 0-9.8816 91.136 429.7728 429.7728 0 0 0 8.448 84.9408 25.6 25.6 0 0 0 25.6 20.0704 121.2416 121.2416 0 0 1 106.24 183.6032 25.2928 25.2928 0 0 0 4.608 32.1024 427.6736 427.6736 0 0 0 145.6128 84.2752 25.6 25.6 0 0 0 30.3616-12.1856 121.344 121.344 0 0 1 213.2992 0 25.6 25.6 0 0 0 30.3104 12.3392 427.6736 427.6736 0 0 0 145.6128-84.2752 25.6 25.6 0 0 0 4.608-32.1024 121.2416 121.2416 0 0 1 106.24-183.6032 25.6 25.6 0 0 0 25.6-20.0704 429.7728 429.7728 0 0 0 8.448-84.9408 424.1408 424.1408 0 0 0-9.8304-91.2896z"
                  fill="#402AD2" p-id="1739"></path>
            <path d="M866.9184 436.48a21.0432 21.0432 0 0 0-21.0432-16.0256A101.7344 101.7344 0 0 1 757.76 371.712a96.4608 96.4608 0 0 1-1.0752-97.8944 20.48 20.48 0 0 0-4.3008-25.6 358.4 358.4 0 0 0-121.9072-67.6352 21.4016 21.4016 0 0 0-24.7296 9.3184 102.4 102.4 0 0 1-174.08 0 21.4016 21.4016 0 0 0-24.7296-9.3184 358.7072 358.7072 0 0 0-122.0096 67.584 20.48 20.48 0 0 0-4.3008 25.6 96.3584 96.3584 0 0 1-1.0752 97.9456 101.7344 101.7344 0 0 1-88.2688 48.7424 21.0432 21.0432 0 0 0-21.0432 16.0256 337.4592 337.4592 0 0 0-8.192 74.1376A341.2992 341.2992 0 0 0 168.96 579.6864a21.0432 21.0432 0 0 0 21.3504 16.2816 101.7856 101.7856 0 0 1 89.1392 48.7424 96.4608 96.4608 0 0 1-0.512 100.5568 20.48 20.48 0 0 0 3.84 26.112A358.8608 358.8608 0 0 0 404.48 839.936a21.4528 21.4528 0 0 0 25.2416-10.24 102.4 102.4 0 0 1 177.92 0 21.4528 21.4528 0 0 0 25.2416 10.24 358.8608 358.8608 0 0 0 121.4976-68.5568 20.48 20.48 0 0 0 3.84-26.112 96.4608 96.4608 0 0 1-0.512-100.5568 101.7856 101.7856 0 0 1 89.1392-48.7424 20.992 20.992 0 0 0 21.3504-16.2816 341.2992 341.2992 0 0 0 7.0656-69.0688 337.4592 337.4592 0 0 0-8.3456-74.1376z"
                  fill="#0F059B" p-id="1740"></path>
            <path d="M840.192 452.352a19.968 19.968 0 0 0-19.7632-15.36 94.7712 94.7712 0 0 1-83.6608-140.9024 19.8144 19.8144 0 0 0-4.0448-24.6784 333.8752 333.8752 0 0 0-114.1248-64.9728 19.8656 19.8656 0 0 0-23.1936 8.96 94.8224 94.8224 0 0 1-163.0208 0 19.8656 19.8656 0 0 0-23.1936-8.96A333.8752 333.8752 0 0 0 295.0656 271.36a19.8144 19.8144 0 0 0-4.0448 24.6784A94.7712 94.7712 0 0 1 207.36 436.9408a19.9168 19.9168 0 0 0-19.7632 15.36 335.3088 335.3088 0 0 0-1.0752 137.5744 19.8144 19.8144 0 0 0 20.0192 15.6672 94.7712 94.7712 0 0 1 82.9952 143.36 19.8144 19.8144 0 0 0 3.584 25.088 333.056 333.056 0 0 0 113.7664 65.8432 19.8656 19.8656 0 0 0 23.7056-9.6256 94.7712 94.7712 0 0 1 166.6048 0 19.8144 19.8144 0 0 0 23.7056 9.6256 333.056 333.056 0 0 0 113.7664-65.8432 19.8144 19.8144 0 0 0 3.584-25.088 94.7712 94.7712 0 0 1 82.9952-143.36 19.8144 19.8144 0 0 0 20.0192-15.6672 335.3088 335.3088 0 0 0-1.0752-137.5744z"
                  fill="#534FFF" p-id="1741"></path>
            <path d="M513.8944 695.1936c-77.9776 0-141.4144-64.6144-141.4144-144.0256s63.4368-143.9744 141.4144-143.9744S655.36 471.7568 655.36 551.168s-63.488 144.0256-141.4656 144.0256z m0-215.04A71.0144 71.0144 0 1 0 583.68 551.168a70.4512 70.4512 0 0 0-69.7856-70.9632z"
                  fill="#402AD2" p-id="1742"></path>
            <path d="M513.8944 664.9856A141.4144 141.4144 0 1 1 655.36 523.5712a141.568 141.568 0 0 1-141.4656 141.4144z m0-211.1488A69.7344 69.7344 0 1 0 583.68 523.5712a69.8368 69.8368 0 0 0-69.7856-69.7344z"
                  fill="#F6E937" p-id="1743"></path>
        </svg>
    </div>
    <button class="uGuiButton"></button>
    <div class="uGuiCard">
        <div class="uGuiContainer">
            <div class="left">
                <div class="status-ind"></div>
            </div>
            <div class="right">
                <div class="text-wrap">
                    <p class="text-content">
                        <a href="#" class="text-link">Jane Doe</a> invited you to edit the
                        <a href="#" class="text-link">Web Design</a> file.
                    </p>
                    <p class="time">2 hours ago</p>
                </div>
                <div class="button-wrap">
                    <button class="primary-cta">View file</button>
                    <button class="secondary-cta">Mark as read</button>
                </div>
            </div>
        </div>
    </div>
    <div class="info">
        <div class="info__icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none">
                <path fill="#393a37"
                      d="m12 1.5c-5.79844 0-10.5 4.70156-10.5 10.5 0 5.7984 4.70156 10.5 10.5 10.5 5.7984 0 10.5-4.7016 10.5-10.5 0-5.79844-4.7016-10.5-10.5-10.5zm.75 15.5625c0 .1031-.0844.1875-.1875.1875h-1.125c-.1031 0-.1875-.0844-.1875-.1875v-6.375c0-.1031.0844-.1875.1875-.1875h1.125c.1031 0 .1875.0844.1875.1875zm-.75-8.0625c-.2944-.00601-.5747-.12718-.7808-.3375-.206-.21032-.3215-.49305-.3215-.7875s.1155-.57718.3215-.7875c.2061-.21032.4864-.33149.7808-.3375.2944.00601.5747.12718.7808.3375.206.21032.3215.49305.3215.7875s-.1155.57718-.3215.7875c-.2061.21032-.4864.33149-.7808.3375z"></path>
            </svg>
        </div>
        <div class="info__title">lorem ipsum dolor sit amet</div>
        <div class="info__close">
            <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                <path d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
                      fill="#393a37"></path>
            </svg>
        </div>
    </div>
    <div id="changeModeButton" class="checkbox-wrapper-16" style="background: red;width: 100px;height: 100px">
        <button class="btn-31">
            <span class="text-container">
    `       <span class="text">Button</span>
            </span>
        </button>

    </div>
</div>
<div class="pageItems" style="display: none">
    <div id="index" style="height: 100%;width: 100%">
        <div class="card">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"></path>
            </svg>
            <div class="card__content">
                <p id="cardTitle" class="card__title">UGUI
                </p>
                <p id="cardBottomTitle" class="card__description">欢迎来到UGUI交友平台</p>
                <p id="cardText" class="card__description"></p>
            </div>
        </div>
    </div>
    <div id="dynamic" style="height: 100%;width: 100%;display: flex;flex-direction: column;">
        <div class="container mt-7 scrollable-content" style="overflow-y:scroll;box-sizing: border-box;padding: 30px">
            <div style="margin-top: 30px" class="uGuiCard">
                <div class="uGuiContainer">
                    <div class="left">
                        <div class="status-ind"></div>
                    </div>
                    <div class="right">
                        <div class="text-wrap">
                            <p class="text-content">
                                <a href="#" class="text-link">CokeGGts</a> 说:HelloWorld
                                <br>
                                <a href="#" class="text-link">随谈</a> 愉悦
                            </p>
                            <p class="time">2024/10/21</p>
                        </div>
                        <div class="button-wrap">
                            <button class="primary-cta">点赞</button>
                            <button class="secondary-cta">喜爱</button>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top: 30px" class="uGuiCard">
                <div class="uGuiContainer">
                    <div class="left">
                        <div class="status-ind"></div>
                    </div>
                    <div class="right">
                        <div class="text-wrap">
                            <p class="text-content">
                                <a href="#" class="text-link">CokeGGts</a> 说:HelloWorld
                                <br>
                                <a href="#" class="text-link">随谈</a> 愉悦
                            </p>
                            <p class="time">2024/10/21</p>
                        </div>
                        <div class="button-wrap">
                            <button class="primary-cta">点赞</button>
                            <button class="secondary-cta">喜爱</button>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top: 30px" class="uGuiCard">
                <div class="uGuiContainer">
                    <div class="left">
                        <div class="status-ind"></div>
                    </div>
                    <div class="right">
                        <div class="text-wrap">
                            <p class="text-content">
                                <a href="#" class="text-link">CokeGGts</a> 说:HelloWorld
                                <br>
                                <a href="#" class="text-link">随谈</a> 愉悦
                            </p>
                            <p class="time">2024/10/21</p>
                        </div>
                        <div class="button-wrap">
                            <button class="primary-cta">点赞</button>
                            <button class="secondary-cta">喜爱</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="flex-grow: 1;padding: 40px">
            <form id="saySomethingForm">
                <div class="form-group">
                    <label for="content">您的内容:</label>
                    <textarea class="form-control" id="content" rows="3" required></textarea>
                </div>
                <div class="container text-center" style="margin-top: 40px">
                    <div class="row">
                        <div class="col">
                            <select class="form-select" aria-label="Default select example">
                                <option selected>今天的心情</option>
                                <option value="1">愉悦</option>
                                <option value="2">痛苦</option>
                            </select>
                        </div>
                        <div class="col" style="display: flex;align-items: center">
                            <label>
                                <input name="input">
                            </label>
                        </div>
                        <div class="col">
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="message" style="height: 100%;width: 100%;display: flex;flex-direction: column">
        <div style="height: 15%;padding: 10px;box-sizing: border-box;display: flex;align-items: start;overflow-x: auto">
            <!--选择好友对话框-->
            <img class="iconSelect" src="https://q8.itc.cn/q_70/images03/20240313/8f9a5b61d87b455495d9ab167e8816b9.jpeg"
                 alt="头像"
                 style="height: 100%;width: auto;border: #00d2ff 2px solid;border-radius: 8px;margin-right: 20px;box-shadow: 0 0 20px rgba(7,178,251,0.94)">
            <img src="https://q8.itc.cn/q_70/images03/20240313/8f9a5b61d87b455495d9ab167e8816b9.jpeg" alt="头像"
                 style="height: 100%;width: auto;border: white 2px solid;border-radius: 8px;margin-right: 20px">
            <img src="https://q8.itc.cn/q_70/images03/20240313/8f9a5b61d87b455495d9ab167e8816b9.jpeg" alt="头像"
                 style="height: 100%;width: auto;border: white 2px solid;border-radius: 8px;margin-right: 20px">
            <img src="https://q8.itc.cn/q_70/images03/20240313/8f9a5b61d87b455495d9ab167e8816b9.jpeg" alt="头像"
                 style="height: 100%;width: auto;border: white 2px solid;border-radius: 8px;margin-right: 20px">
            <img src="https://q8.itc.cn/q_70/images03/20240313/8f9a5b61d87b455495d9ab167e8816b9.jpeg" alt="头像"
                 style="height: 100%;width: auto;border: white 2px solid;border-radius: 8px;margin-right: 20px">
        </div>
        <div style="display: flex;align-items: start;flex-direction: column;justify-content: start;padding: 20px;overflow-y: scroll;height: 60%">
            <!--聊天-->
            <div style="margin-top: 20px" class="info">
                <div class="info__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none">
                        <path fill="#393a37"
                              d="m12 1.5c-5.79844 0-10.5 4.70156-10.5 10.5 0 5.7984 4.70156 10.5 10.5 10.5 5.7984 0 10.5-4.7016 10.5-10.5 0-5.79844-4.7016-10.5-10.5-10.5zm.75 15.5625c0 .1031-.0844.1875-.1875.1875h-1.125c-.1031 0-.1875-.0844-.1875-.1875v-6.375c0-.1031.0844-.1875.1875-.1875h1.125c.1031 0 .1875.0844.1875.1875zm-.75-8.0625c-.2944-.00601-.5747-.12718-.7808-.3375-.206-.21032-.3215-.49305-.3215-.7875s.1155-.57718.3215-.7875c.2061-.21032.4864-.33149.7808-.3375.2944.00601.5747.12718.7808.3375.206.21032.3215.49305.3215.7875s-.1155.57718-.3215.7875c-.2061.21032-.4864.33149-.7808.3375z"></path>
                    </svg>
                </div>
                <div class="info__title">lorem ipsum dolor sit amet</div>
                <div class="info__close">
                    <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
                              fill="#393a37"></path>
                    </svg>
                </div>
            </div>
            <div style="margin-top: 20px" class="info">
                <div class="info__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none">
                        <path fill="#393a37"
                              d="m12 1.5c-5.79844 0-10.5 4.70156-10.5 10.5 0 5.7984 4.70156 10.5 10.5 10.5 5.7984 0 10.5-4.7016 10.5-10.5 0-5.79844-4.7016-10.5-10.5-10.5zm.75 15.5625c0 .1031-.0844.1875-.1875.1875h-1.125c-.1031 0-.1875-.0844-.1875-.1875v-6.375c0-.1031.0844-.1875.1875-.1875h1.125c.1031 0 .1875.0844.1875.1875zm-.75-8.0625c-.2944-.00601-.5747-.12718-.7808-.3375-.206-.21032-.3215-.49305-.3215-.7875s.1155-.57718.3215-.7875c.2061-.21032.4864-.33149.7808-.3375.2944.00601.5747.12718.7808.3375.206.21032.3215.49305.3215.7875s-.1155.57718-.3215.7875c-.2061.21032-.4864.33149-.7808.3375z"></path>
                    </svg>
                </div>
                <div class="info__title">lorem ipsum dolor sit amet</div>
                <div class="info__close">
                    <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
                              fill="#393a37"></path>
                    </svg>
                </div>
            </div>
            <div style="margin-top: 20px" class="info">
                <div class="info__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none">
                        <path fill="#393a37"
                              d="m12 1.5c-5.79844 0-10.5 4.70156-10.5 10.5 0 5.7984 4.70156 10.5 10.5 10.5 5.7984 0 10.5-4.7016 10.5-10.5 0-5.79844-4.7016-10.5-10.5-10.5zm.75 15.5625c0 .1031-.0844.1875-.1875.1875h-1.125c-.1031 0-.1875-.0844-.1875-.1875v-6.375c0-.1031.0844-.1875.1875-.1875h1.125c.1031 0 .1875.0844.1875.1875zm-.75-8.0625c-.2944-.00601-.5747-.12718-.7808-.3375-.206-.21032-.3215-.49305-.3215-.7875s.1155-.57718.3215-.7875c.2061-.21032.4864-.33149.7808-.3375.2944.00601.5747.12718.7808.3375.206.21032.3215.49305.3215.7875s-.1155.57718-.3215.7875c-.2061.21032-.4864.33149-.7808.3375z"></path>
                    </svg>
                </div>
                <div class="info__title">lorem ipsum dolor sit amet</div>
                <div class="info__close">
                    <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
                              fill="#393a37"></path>
                    </svg>
                </div>
            </div>
            <div style="margin-top: 20px" class="info">
                <div class="info__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none">
                        <path fill="#393a37"
                              d="m12 1.5c-5.79844 0-10.5 4.70156-10.5 10.5 0 5.7984 4.70156 10.5 10.5 10.5 5.7984 0 10.5-4.7016 10.5-10.5 0-5.79844-4.7016-10.5-10.5-10.5zm.75 15.5625c0 .1031-.0844.1875-.1875.1875h-1.125c-.1031 0-.1875-.0844-.1875-.1875v-6.375c0-.1031.0844-.1875.1875-.1875h1.125c.1031 0 .1875.0844.1875.1875zm-.75-8.0625c-.2944-.00601-.5747-.12718-.7808-.3375-.206-.21032-.3215-.49305-.3215-.7875s.1155-.57718.3215-.7875c.2061-.21032.4864-.33149.7808-.3375.2944.00601.5747.12718.7808.3375.206.21032.3215.49305.3215.7875s-.1155.57718-.3215.7875c-.2061.21032-.4864.33149-.7808.3375z"></path>
                    </svg>
                </div>
                <div class="info__title">lorem ipsum dolor sit amet</div>
                <div class="info__close">
                    <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
                              fill="#393a37"></path>
                    </svg>
                </div>
            </div>
            <div style="margin-top: 20px" class="info">
                <div class="info__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none">
                        <path fill="#393a37"
                              d="m12 1.5c-5.79844 0-10.5 4.70156-10.5 10.5 0 5.7984 4.70156 10.5 10.5 10.5 5.7984 0 10.5-4.7016 10.5-10.5 0-5.79844-4.7016-10.5-10.5-10.5zm.75 15.5625c0 .1031-.0844.1875-.1875.1875h-1.125c-.1031 0-.1875-.0844-.1875-.1875v-6.375c0-.1031.0844-.1875.1875-.1875h1.125c.1031 0 .1875.0844.1875.1875zm-.75-8.0625c-.2944-.00601-.5747-.12718-.7808-.3375-.206-.21032-.3215-.49305-.3215-.7875s.1155-.57718.3215-.7875c.2061-.21032.4864-.33149.7808-.3375.2944.00601.5747.12718.7808.3375.206.21032.3215.49305.3215.7875s-.1155.57718-.3215.7875c-.2061.21032-.4864.33149-.7808.3375z"></path>
                    </svg>
                </div>
                <div class="info__title">lorem ipsum dolor sit amet</div>
                <div class="info__close">
                    <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
                              fill="#393a37"></path>
                    </svg>
                </div>
            </div>
            <div style="margin-top: 20px" class="info">
                <div class="info__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none">
                        <path fill="#393a37"
                              d="m12 1.5c-5.79844 0-10.5 4.70156-10.5 10.5 0 5.7984 4.70156 10.5 10.5 10.5 5.7984 0 10.5-4.7016 10.5-10.5 0-5.79844-4.7016-10.5-10.5-10.5zm.75 15.5625c0 .1031-.0844.1875-.1875.1875h-1.125c-.1031 0-.1875-.0844-.1875-.1875v-6.375c0-.1031.0844-.1875.1875-.1875h1.125c.1031 0 .1875.0844.1875.1875zm-.75-8.0625c-.2944-.00601-.5747-.12718-.7808-.3375-.206-.21032-.3215-.49305-.3215-.7875s.1155-.57718.3215-.7875c.2061-.21032.4864-.33149.7808-.3375.2944.00601.5747.12718.7808.3375.206.21032.3215.49305.3215.7875s-.1155.57718-.3215.7875c-.2061.21032-.4864.33149-.7808.3375z"></path>
                    </svg>
                </div>
                <div class="info__title">lorem ipsum dolor sit amet</div>
                <div class="info__close">
                    <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
                              fill="#393a37"></path>
                    </svg>
                </div>
            </div>
            <div style="margin-top: 20px" class="info">
                <div class="info__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none">
                        <path fill="#393a37"
                              d="m12 1.5c-5.79844 0-10.5 4.70156-10.5 10.5 0 5.7984 4.70156 10.5 10.5 10.5 5.7984 0 10.5-4.7016 10.5-10.5 0-5.79844-4.7016-10.5-10.5-10.5zm.75 15.5625c0 .1031-.0844.1875-.1875.1875h-1.125c-.1031 0-.1875-.0844-.1875-.1875v-6.375c0-.1031.0844-.1875.1875-.1875h1.125c.1031 0 .1875.0844.1875.1875zm-.75-8.0625c-.2944-.00601-.5747-.12718-.7808-.3375-.206-.21032-.3215-.49305-.3215-.7875s.1155-.57718.3215-.7875c.2061-.21032.4864-.33149.7808-.3375.2944.00601.5747.12718.7808.3375.206.21032.3215.49305.3215.7875s-.1155.57718-.3215.7875c-.2061.21032-.4864.33149-.7808.3375z"></path>
                    </svg>
                </div>
                <div class="info__title">lorem ipsum dolor sit amet</div>
                <div class="info__close">
                    <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
                              fill="#393a37"></path>
                    </svg>
                </div>
            </div>
            <div style="margin-top: 20px" class="info">
                <div class="info__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none">
                        <path fill="#393a37"
                              d="m12 1.5c-5.79844 0-10.5 4.70156-10.5 10.5 0 5.7984 4.70156 10.5 10.5 10.5 5.7984 0 10.5-4.7016 10.5-10.5 0-5.79844-4.7016-10.5-10.5-10.5zm.75 15.5625c0 .1031-.0844.1875-.1875.1875h-1.125c-.1031 0-.1875-.0844-.1875-.1875v-6.375c0-.1031.0844-.1875.1875-.1875h1.125c.1031 0 .1875.0844.1875.1875zm-.75-8.0625c-.2944-.00601-.5747-.12718-.7808-.3375-.206-.21032-.3215-.49305-.3215-.7875s.1155-.57718.3215-.7875c.2061-.21032.4864-.33149.7808-.3375.2944.00601.5747.12718.7808.3375.206.21032.3215.49305.3215.7875s-.1155.57718-.3215.7875c-.2061.21032-.4864.33149-.7808.3375z"></path>
                    </svg>
                </div>
                <div class="info__title">lorem ipsum dolor sit amet</div>
                <div class="info__close">
                    <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
                              fill="#393a37"></path>
                    </svg>
                </div>
            </div>
            <div style="margin-top: 20px" class="info">
                <div class="info__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none">
                        <path fill="#393a37"
                              d="m12 1.5c-5.79844 0-10.5 4.70156-10.5 10.5 0 5.7984 4.70156 10.5 10.5 10.5 5.7984 0 10.5-4.7016 10.5-10.5 0-5.79844-4.7016-10.5-10.5-10.5zm.75 15.5625c0 .1031-.0844.1875-.1875.1875h-1.125c-.1031 0-.1875-.0844-.1875-.1875v-6.375c0-.1031.0844-.1875.1875-.1875h1.125c.1031 0 .1875.0844.1875.1875zm-.75-8.0625c-.2944-.00601-.5747-.12718-.7808-.3375-.206-.21032-.3215-.49305-.3215-.7875s.1155-.57718.3215-.7875c.2061-.21032.4864-.33149.7808-.3375.2944.00601.5747.12718.7808.3375.206.21032.3215.49305.3215.7875s-.1155.57718-.3215.7875c-.2061.21032-.4864.33149-.7808.3375z"></path>
                    </svg>
                </div>
                <div class="info__title">lorem ipsum dolor sit amet</div>
                <div class="info__close">
                    <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
                              fill="#393a37"></path>
                    </svg>
                </div>
            </div>
            <div style="margin-top: 20px" class="info">
                <div class="info__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none">
                        <path fill="#393a37"
                              d="m12 1.5c-5.79844 0-10.5 4.70156-10.5 10.5 0 5.7984 4.70156 10.5 10.5 10.5 5.7984 0 10.5-4.7016 10.5-10.5 0-5.79844-4.7016-10.5-10.5-10.5zm.75 15.5625c0 .1031-.0844.1875-.1875.1875h-1.125c-.1031 0-.1875-.0844-.1875-.1875v-6.375c0-.1031.0844-.1875.1875-.1875h1.125c.1031 0 .1875.0844.1875.1875zm-.75-8.0625c-.2944-.00601-.5747-.12718-.7808-.3375-.206-.21032-.3215-.49305-.3215-.7875s.1155-.57718.3215-.7875c.2061-.21032.4864-.33149.7808-.3375.2944.00601.5747.12718.7808.3375.206.21032.3215.49305.3215.7875s-.1155.57718-.3215.7875c-.2061.21032-.4864.33149-.7808.3375z"></path>
                    </svg>
                </div>
                <div class="info__title">lorem ipsum dolor sit amet</div>
                <div class="info__close">
                    <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
                              fill="#393a37"></path>
                    </svg>
                </div>
            </div>

        </div>
        <div style="flex-grow: 1;align-items: center;display: flex;flex-direction: row;justify-content: end;padding: 20px">
            <!--发送内容-->
            <div class="search">
                <label style="width: 100%;">
                    <input placeholder="请输入消息" type="text">
                </label>
                <button type="submit">发送</button>
            </div>

        </div>
    </div>
    <div id="friend"
         style="height: 100%;width: 100%;overflow-y: auto;display: flex;flex-direction: column;padding: 40px">
        <div style="height: 80%">
            <ul class="list-group">
                <li class="list-group-item">An item</li>
                <li class="list-group-item">A second item</li>
                <li class="list-group-item">A third item</li>
                <li class="list-group-item">A fourth item</li>
                <li class="list-group-item">And a fifth one</li>
            </ul>
        </div>
        <div style="flex-grow: 1">
            <div class="input-group input-group-sm mb-3">
                <span class="input-group-text" id="inputGroup-sizing-sm">好友ID</span>
                <input type="text" class="form-control" aria-label="Sizing example input"
                       aria-describedby="inputGroup-sizing-sm">
                <button type="button" class="btn btn-primary">添加好友</button>
            </div>
        </div>
    </div>
    <div id="operate" style="height: 100%;width: 100%;display: flex;flex-direction: column;padding: 40px">
        <div style="height: 80%">
            <ul class="list-group">
                <li class="list-group-item">An item</li>
                <li class="list-group-item">A second item</li>
                <li class="list-group-item">A third item</li>
                <li class="list-group-item">A fourth item</li>
                <li class="list-group-item">And a fifth one</li>
            </ul>
        </div>
        <div style="flex-grow: 1">
            <div class="input-group input-group-sm mb-3">
                <span class="input-group-text">好友ID</span>
                <input type="text" class="form-control" aria-label="Sizing example input"
                       aria-describedby="inputGroup-sizing-sm">
                <button type="button" class="btn btn-danger">删除好友</button>
            </div>
        </div>
    </div>
    <div id="set" style="height: 100%;width: 100%;display: flex;align-items: center;justify-content: center">
    </div>
</div>
<!--脚本片段-->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
        crossorigin="anonymous"></script>
<script type="module">
    import uGuiText from "./js/static.js";

    $(document).ready(function () {
        let mainContainer = $("#mainContainer");
        let pages = [];
        let select = 0;
        let isDark = true;
        let changePage = (index) => {
            if (index === select) return;
            mainContainer.empty();
            if (pages[index][1] != null) {
                pages[index][1]();
            }
            select = index;
        }
        let initMap = () => {
            pages.push([$("#index"), initIndex]);
            pages.push([$("#dynamic"), initDynamic]);
            pages.push([$("#message"), initMessage]);
            pages.push([$("#friend"), initFriend]);
            pages.push([$("#operate"), initOperate]);
            pages.push([$("#set"), initSet]);
        }
        let initLeftIcon = () => {
            let icons = $("#uGuiIconList").children();
            let uGuiMainList = $("#uGuiMainList");
            let button = $(".uGuiButton");
            for (let i = 0; i < icons.length; i++) {
                let icon = icons[i];
                let clone = button.clone();
                clone.append(icon);
                uGuiMainList.append(clone);
                clone.click(() => {
                    changePage(i);
                    console.log(1)
                })
            }
        }
        let initIndex = () => {
            let card = $("#index");
            let cardTitle = $("#cardTitle");
            let cardBottomTitle = $("#cardBottomTitle");
            let cardText = $("#cardText");
            cardTitle.text(uGuiText.title);
            cardBottomTitle.text(uGuiText.bottomTitle);
            cardText.text(uGuiText.hello)
            let clone = card.clone();
            mainContainer.append(clone);
        }
        let initDynamic = () => {
            let dynamic = $("#dynamic");
            let clone = dynamic.clone();
            mainContainer.append(clone);
        }
        let initMessage = () => {
            let message = $("#message");
            let clone = message.clone();
            mainContainer.append(clone);
        }
        let initFriend = () => {
            let friend = $("#friend");
            let clone = friend.clone();
            mainContainer.append(clone);
        }
        let initOperate = () => {
            let operate = $("#operate");
            let clone = operate.clone();
            mainContainer.append(clone);
        }
        let initSet = () => {
            let set = $("#set");
            let changeModeButton = $(".btn-31");
            let cloneButton = changeModeButton.clone();
            cloneButton.click(() => {
                $("html").attr("data-bs-theme", isDark ? "light" : "dark");
                isDark = !isDark;
            })
            let clone = set.clone();
            clone.append(cloneButton)
            mainContainer.append(clone);
        }
        let main = () => {
            initLeftIcon();
            initMap();
            initIndex();
        }
        main();
    });
</script>
</body>
</html>